<template>
    <div>
        <button @click="log">{{ mag }}</button>
        {{ name }}
        {{ age }}
        <button @click="handleClick">click</button>
        {{ computedName }}
        <!-- 组件可以导入之后就直接使用了 -->
        <Child title="电影" @right="handleRight"></Child>
    </div>
</template>

<script setup>
//顶层绑定: 声明的顶层的绑定(包括变量,函数声明以及import导入的内容都能在模版中直接使用)

import { computed, reactive, ref, toRefs } from "vue";
import Child from './Child.vue'

// 变量
const mag = 'Hello'
//ref   age age.value调用
const name = ref('zhangsan')
//reactive   state.age调用
const state = reactive({
    age: 19
})
//reactive转ref
const {age} = {...toRefs(state)}
//函数
function log() {
    console.log(mag);
}
function handleClick() {
    age.value = '20'
}
// 计算属性
const computedName = computed(() => name.value.substring(0, 1).toUpperCase() + name.value.substring(1))
// 子传父事件
function handleRight(value,value2) {
    console.log('right', value, value2)
}

// 不需要return就可以直接使用
</script>